<template>
  <div class="coupon-setting setting">
    <template v-if="tabType == 'data'">
      <dc-list v-model="settingData.data.couponList">
        <template #title>优惠券选择</template>
        <template #listItem="{ element }">
          <el-form-item label-width="28px">
            <div class="name sa-m-b-4">
              {{ element.name }}
            </div>
            <div class="amount-text">
              {{ element.amount_text }}
            </div>
          </el-form-item>
        </template>
        <template #add>
          <el-button class="add-button" icon="Plus" @click="onAdd">添加</el-button>
        </template>
      </dc-list>
      <div class="card">
        <div class="title">优惠券样式</div>
        <div class="content">
          <el-form-item label="选择风格">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-coupon-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-coupon-mode-2" />
              </el-radio-button>
              <el-radio-button :label="3">
                <sa-icon icon="sa-shop-decorate-coupon-mode-3" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="背景图片">
            <sa-uploader v-model="settingData.data.fill.bgImage" fileType="image"></sa-uploader>
          </el-form-item>
          <el-form-item label="文字颜色">
            <dc-color-picker v-model="settingData.data.fill.color"></dc-color-picker>
          </el-form-item>
          <el-form-item label="按钮背景">
            <dc-color-picker v-model="settingData.data.button.bgColor"></dc-color-picker>
          </el-form-item>
          <el-form-item label="按钮文字">
            <dc-color-picker v-model="settingData.data.button.color"></dc-color-picker>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { useModal } from '@/sheep/hooks';
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcList from '../../common/dc-list.vue';
  import dcSlider from '../../common/dc-slider.vue';
  import CouponSelect from '@/app/shop/admin/coupon/select.vue';

  const props = defineProps(['settingData', 'tabType']);

  function onAdd() {
    useModal(
      CouponSelect,
      {
        title: '选择优惠券',
        status: 'normal',
        multiple: true,
      },
      {
        confirm: (res) => {
          props.settingData.data.couponList.push(...res.data);
        },
      },
    );
  }
</script>
<style lang="scss" scoped>
  .coupon-setting {
    .name {
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-title);
    }
    .amount-text {
      line-height: 16px;
      font-size: 12px;
      font-weight: 500;
      color: var(--sa-subfont);
    }
  }
</style>
